<template>
	<view class="AceTex">
		<view class="split-title">
			<view></view><text>我关注的人</text>
		</view>
		<template v-if="listFollowState == 'success'">
			<view class="list-follow">
				<view
					@click="clickUsername(item.username)"
					class="for"
					v-for="item in listFollow">
					<view class="avatar">
						<view class="image">
							<image :src="item.avatar" mode="widthFix"></image>
						</view>
						<view class="roleName" :style="'background:'+item.nicknameColor+';'">
							<text>{{item.roleName}}</text>
						</view>
					</view>
					<view class="nickname">
						<text>{{item.nickname}}</text>
					</view>
				</view>
			</view>
		</template>
		<template v-if="listFollowState == 'loading'">
			<public-loading></public-loading>
		</template>
		<template v-if="listFollowState == 'empty'">
			<public-empty></public-empty>
		</template>
		<view class="scroll">
			<scroll-view scroll-x="true">
				<view
					:class="listTabHover=='post'?'hover':''"
					@click="clickRoles('post','')">
					<text>发帖排行</text>
				</view>
				<view
					:class="listTabHover=='comment'?'hover':''"
					@click="clickRoles('comment','')">
					<text>评论排行</text>
				</view>
				<view
					:class="listTabHover==item.rid?'hover':''"
					@click="clickRoles('',item.rid)"
					v-for="item in listRoles">
					<text>{{item.name}}</text>
				</view>
			</scroll-view>
		</view>
		<template v-if="listUserState == 'success'">
			<view class="list-user">
				<view
					v-for="item in listUser"
					@click="clickUsername(item.username)"
					class="for">
					<view class="avatar">
						<view class="image">
							<image :src="item.avatar" mode="widthFix"></image>
						</view>
						<view class="roleName" :style="'background:'+item.nicknameColor+';'">
							<text>{{item.roleName}}</text>
						</view>
					</view>
					<view class="nickname">
						<text>{{item.nickname}}</text>
					</view>
				</view>
				<view
					@click="getUserMore"
					class="more">点击加载更多</view>
			</view>
		</template>
		<template v-if="listUserState == 'loading'">
			<public-loading></public-loading>
		</template>
		<template v-if="listUserState == 'empty'">
			<public-empty></public-empty>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listFollow:[],
				listFollowState:"loading",
				listRoles:[],
				listUser:[],
				listUserPage:2,
				listUserState:"loading",
				listTabHover:"post"
				
			}
		},
		onLoad(e) {
			if(e.uniqueId){
				this.uniqueId = e.uniqueId
			}else{
				this.uniqueId = "";
			}
			if(uni.getStorageSync('user').data.detail.uid){
				this.getFollow();
			}
		},
		methods: {
			// 获取我关注的
			getFollow(){
				this.$_Request(
					"GET","/api/v2/user/"+uni.getStorageSync('user').data.detail.uid+"/mark/follow/users",
					{
						"whitelistKeys":"username,avatar,nicknameColor,roleName,nickname,uid"
					},
					(res) => {
						if(res.data.data.list.length){
							this.listFollow = res.data.data.list;
							uni.hideLoading();
							this.listFollowState = "success"
						}else{
							this.listFollowState = "empty"
						}
						this.getRoles();
					}
				)
			},
			// 获取用户角色
			getRoles(){
				this.$_Request(
					"GET","/api/v2/global/roles",
					{
						"type": 3,
					},
					(res) => {
						this.listRoles = res.data.data.list;
						this.getUser('post','');
					}
				)
			},
			// 点击，切换卡
			clickRoles(type,rid){
				if(type){
					this.listTabHover = type;
				}else{
					this.listTabHover = rid;
				}
				this.listUserState = "loading";
				this.listUserPage = 2;
				this.getUser(type,rid);
			},
			// 获取，用户列表
			getUser(type,rid){
				this.userType = type;
				this.userRid = rid;
				this.$_Request(
					"GET","/api/v2/user/list",
					{
						"roles":this.userRid?this.userRid:"",
						"orderType":this.userType?this.userType:"",
						"whitelistKeys":"username,avatar,nicknameColor,roleName,nickname,uid",
					},
					(res) => {
						if(res.data.data.list.length){
							this.listUser = res.data.data.list;
							uni.hideLoading();
							this.listUserState = "success"
						}else{
							this.listUserState = "empty"
						}
					}
				)
			},
			getUserMore(){
				uni.showLoading({ title: "加载中" });
				this.$_Request(
					"GET","/api/v2/user/list",
					{
						"roles":this.userRid?this.userRid:"",
						"orderType":this.userType?this.userType:"",
						"whitelistKeys":"username,avatar,nicknameColor,roleName,nickname,uid",
						"page":this.listUserPage,
					},
					(res) => {
						if(res.data.data.list.length){
							this.listUser = this.listUser.concat(res.data.data.list);
							this.listUserPage++
							uni.hideLoading();
						}else{
							uni.showToast({
								title: "没有数据啦",
								icon: "none",
								duration: 1000
							});
						}
					}
				)
			},
			// 点击用户
			clickUsername(username){
				uni.$emit('aiteUser'+this.uniqueId,{msg:' @'+username+' '})
				uni.navigateBack()
			},
		}
	}
</script>

<style lang="scss">
.AceTex{
	.split-title{
		display: flex;
		align-items: center;
		margin: 25rpx 25rpx 0 25rpx;
		padding-bottom: 25rpx;
		border-bottom: 1rpx solid $BianKuangSe;
		view{
			width: 10rpx;
			height: 28rpx;
			border-radius: 5rpx;
			background: $LanSe;
			margin-right: 10rpx;
		}
	}
	.list-follow{
		display: flex;
		flex-wrap: wrap;
		.for{
			width: 120rpx;
			margin: 25rpx 0 0 25rpx;
			.avatar{
				width: 120rpx;
				height: 120rpx;
				overflow: hidden;
				position: relative;
				.image{
					width: 120rpx;
					height: 120rpx;
					overflow: hidden;
					border-radius: 100%;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 1;
				}
				.roleName{
					width: 100rpx;
					height: 30rpx;
					background: $ZhanWeiSe;
					position: absolute;
					bottom: 0;
					left: 10rpx;
					z-index: 2;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 18rpx;
					line-height: 18rpx;
					border: 1rpx solid #FFF;
					border-radius: 5rpx;
					text{
						display: -webkit-box;
						/*!autoprefixer:off*/
						-webkit-box-orient: vertical;
						/*autoprefixer:on*/
						-webkit-line-clamp: 1;
						overflow: hidden;
						color: #FFF;
					}
				}
			}
			.nickname{
				text-align: center;
				text{
					font-size: 28rpx;
					display: -webkit-box;
					/*!autoprefixer:off*/
					-webkit-box-orient: vertical;
					/*autoprefixer:on*/
					-webkit-line-clamp: 1;
					overflow: hidden;
				}
			}
		}
	}
	.scroll{
		width: 100%;
		height: 80rpx;
		margin-top: 25rpx;
		scroll-view{
			white-space: nowrap;
			width: 730rpx;
			height: 80rpx;
			background: $BeiJingSe;
			border-top: 1rpx solid $BianKuangSe;
			border-bottom: 1rpx solid $BianKuangSe;
			padding: 0 10rpx;
			view{
				display: inline-flex;
				align-items: center;
				height: 80rpx;
				text{
					padding: 0 25rpx;
				}
			}
			.hover{
				background: #FFF;
				text{
					color: $LanSe;
				}
			}
		}
	}
	.list-user{
		display: flex;
		flex-wrap: wrap;
		.for{
			width: 120rpx;
			margin: 25rpx 0 0 25rpx;
			.avatar{
				width: 120rpx;
				height: 120rpx;
				overflow: hidden;
				position: relative;
				.image{
					width: 120rpx;
					height: 120rpx;
					overflow: hidden;
					border-radius: 100%;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 1;
				}
				.roleName{
					width: 100rpx;
					height: 30rpx;
					background: $ZhanWeiSe;
					position: absolute;
					bottom: 0;
					left: 10rpx;
					z-index: 2;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 18rpx;
					line-height: 18rpx;
					border: 1rpx solid #FFF;
					border-radius: 5rpx;
					text{
						display: -webkit-box;
						/*!autoprefixer:off*/
						-webkit-box-orient: vertical;
						/*autoprefixer:on*/
						-webkit-line-clamp: 1;
						overflow: hidden;
						color: #FFF;
					}
				}
			}
			.nickname{
				text-align: center;
				text{
					font-size: 28rpx;
					display: -webkit-box;
					/*!autoprefixer:off*/
					-webkit-box-orient: vertical;
					/*autoprefixer:on*/
					-webkit-line-clamp: 1;
					overflow: hidden;
				}
			}
		}
	}
	.more{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		line-height: 28rpx;
		color: $ZhanWeiSe;
		padding: 35rpx 0;
	}
}
</style>
